import type { GetServerSideProps, NextPage } from 'next'
import Head from 'next/head'
import Link from 'next/link'
import router from 'next/router'
import styles from '../styles/Home.module.scss'
import { useEffect, useState } from 'react'
import { UserService } from '../services'

import { Layout, Menu } from 'antd';
import { BookOutlined, TeamOutlined, UnorderedListOutlined } from '@ant-design/icons';
import Judge from '../components/Judge'
import HeaderBar from '../components/HeaderBar'
import Books from '../components/Books'
import User from '../components/User'
import { IUser } from '../models/types'
import Remark from '../components/Remark'
import { Identity } from '../models/enums'

const { SubMenu } = Menu;
interface Props {
  current: string
  loger: IUser
}
const { Sider, Content } = Layout;

export const getServerSideProps: GetServerSideProps = async ctx => {
  const res = await UserService.getuser(ctx.req.cookies.token)
  if (res.stat !== 'OK')
    return {
      redirect: {
        destination: '/login',
        permanent: false
      }
    }
  if (res.user.role !== Identity.Admin) await UserService.logout()

  const key = ctx.query.key ? ctx.query.key : 'judge'

  return {
    props: {
      current: key as string,
      loger: res.user
    }
  }
}

const Home: NextPage<Props> = ({ current, loger }) => {

  const [curKey, setCurKey] = useState<string>(current)

  function getTitle(cur: string) {
    if (cur === 'users') return '用户列表'
    if (cur === 'books') return '书籍列表'
    if (cur === 'judge') return '审核列表'
    if (cur === 'remarks') return '评论列表'

  }

  useEffect(() => {
    setCurKey(current)
  }, [current])

  return (
    <div className="page">
      <Head>
        <title>民大二手书店-管理端</title>
      </Head>
      <Layout className={styles.wrap}>
        <HeaderBar user={loger} />
        <Layout>
          <Sider
            width={256}
            style={{ height: '100%' }}
            className={styles.sider}>
            <Menu
              mode="inline"
              selectedKeys={[curKey]}
              defaultOpenKeys={['goods']}
              style={{ height: '100%', borderRight: 0 }}
              onSelect={({ key }) => router.push(`/?key=${key}`)}
            >
              <SubMenu
                key="goods"
                icon={<BookOutlined />}
                title="书籍管理">
                <Menu.Item key="judge">待审核书籍</Menu.Item>
                <Menu.Item key="books">书籍列表</Menu.Item>
                {/* <Menu.Item key="purchase">收购书籍</Menu.Item>
                <Menu.Item key="publice">发布书籍</Menu.Item> */}
              </SubMenu>
              <Menu.Item
                key="users"
                icon={<TeamOutlined />}
                title="用户管理">
                用户列表
              </Menu.Item>
              <Menu.Item
                key="remarks"
                icon={<UnorderedListOutlined />}
                title="评论列表">
                评论列表
              </Menu.Item>
            </Menu>
          </Sider>
          <Content className={styles.content}>
            <h4>{getTitle(current)}</h4>
            {curKey === 'judge' && <Judge />}
            {curKey === 'books' && <Books />}
            {curKey === 'users' && <User />}
            {curKey === 'remarks' && <Remark />}
          </Content>
        </Layout>
      </Layout>
    </div>
  )
}

export default Home
